<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Aloha, World!</title>
	
	<link rel="stylesheet" href="index.css" type="text/css">

	<style>
		.hor-minimalist-a
		{
			background: #fff;
			border-collapse: collapse;
			text-align: left;
		}
		.hor-minimalist-a th
		{
			font-size: 130%;
			font-weight: normal;
			padding: 10px 8px;
			border-bottom: 2px solid #6678b1;
		}
		.hor-minimalist-a td
		{
			padding: 9px 8px 0px 8px;
		}
		.hor-minimalist-a tbody tr:hover td
		{
			color: #009;
		}

		.box-table-a
		{
			text-align: left;
			border-collapse: collapse;
		}
		.box-table-a th
		{
			font-size: 115%;
			font-weight: normal;
			padding: 8px;
			background: #b9c9fe;
			border-top: 4px solid #aabcfe;
			border-bottom: 1px solid #fff;
		}
		.box-table-a td
		{
			padding: 8px;
			background: #e8edff;
			border-bottom: 1px solid #fff;
			border-top: 1px solid transparent;
		}
		.box-table-a tr:hover td
		{
			background: #d0dafd;
		}

		.hor-zebra
		{
			text-align: left;
			border-collapse: collapse;
		}
		.hor-zebra th
		{
			font-size: 130%;
			font-weight: bold;
			padding: 10px 8px;
			border-bottom: 2px solid #6678b1;

		}
		.hor-zebra td
		{
			padding: 8px;
		}
		.hor-zebra tr:nth-child(2n+1) td
		{
			background: #e8edff;
		}

		td.bigbold {
			font-size: 200%;
			font-weight: bold;
		}
		td.redwhite {
			background-color: red;
			color: white;
			font-weight: bold;
		}

		.aloha-placeholder {
			background: #ddd;
			color: #666;
			margin: 5px 0 0 0;
		}

		#typo3span {
			display: block;
		}
	</style>
	<link rel="stylesheet" href="../../css/aloha.css" type="text/css">
	<script src="js/aloha-config.js" language="javascript"></script>
	<script src="../../lib/require.js"></script>
	<script src="../../lib/vendor/jquery-3.7.0.js"></script>
	<script src="../../lib/aloha.js" data-aloha-plugins="common/ui,
														 common/format,
														 common/highlighteditables,
														 common/list,
														 common/link,
														 common/undo,
														 common/paste,
														 common/block,
														 common/contenthandler,
														 common/table"></script>
</head>
<body>
	<div id="main">
		<div id="tree-div"></div>
		<h1 id="title">Tables!</h1>
		<div id="bodyContent">
			<div id="teaser" class="shorttext">
				<p>
					Testing table resizing
				</p>
			</div>
			<div id="content" class="article">
				<table>
					<caption>Aloha Editor supports table captions.</caption>
					<tr><td colspan="2">This</td><td>a</td><td>table</td></tr>
					<tr><td>with</td><td>some</td><td>dummy</td><td>data</td></tr>
				</table>

				<p>table with list</p>
				
				<table>
					<caption>Aloha Editor supports table captions.</caption>
					<tr><td>This</td><td>is</td><td>a</td><td>table</td></tr>
					<tr><td>with</td><td><ul><li>one</li><li>two</li><li>three</li></ul></td><td>dummy</td><td>data</td></tr>
					<tr><td>with</td><td>some</td><td>dummy</td><td>data</td></tr>
				</table>


			</div>
		</div>
	</div>
	<script type="text/javascript">
	// http://requirejs.org/docs/errors.html#mismatch
	// ../../plugins/common/link/extra/linklist.js

	// Bind to Aloha Ready Event
	Aloha.ready( function() {
		var $ = Aloha.jQuery;
		$('#typo3').aloha();
		$('#typo3span').aloha();
		$('#title').aloha();
		$('#teaser').aloha();
		$('#content').aloha();
	});
	</script>
</body>
</html>
